<template>
	<view class="file-content popup-title">
		<u-popup :show="data.show">
			<view class="bg-color file-box">
				<z-paging ref="paging" v-model="data.dataList" @query="queryList">
					<template #top>
						<view class="search-box" style="">
						</view>
					</template>
					<view class="contract-list flex" @click="itemClick(item)" v-for="(item,index) in data.dataList"
						:key="index">
						<image class="file-icon" :src="item.member_seal_images_url"
							style="width: 100rpx; height: 100%;"></image>
						<view class="title_box">
							<text class="title">{{ item.member_seal_title }}</text>
						</view>
						<view class="use"> 使用 </view>
					</view>
					<template #loadingMoreNoMore>
						<custom-nomore></custom-nomore>
					</template>
					<template #bottom>
						<view class="flex bottom-button">
							<u-button text="取消" class="custom-style" @click="close" :customStyle="butStyle"></u-button>
						</view>
					</template>
				</z-paging>
			</view>
		</u-popup>
	</view>
</template>
<script setup>
	import {
		sealList
	} from "@/api/module/mine";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from 'vue';
	import {
		butStyle
	} from "../utils/style";
	import {
		useStore
	} from 'vuex';
	const emit = defineEmits(['return-seal']);
	const data = reactive({
		show: false,
		dataList: [],
		member_contract_id: 0,
		member_seal_id: 0,
	})
	const store = useStore()
	const paging = ref(null)
	const open = () => {
		data.show = true;
	}
	const close = () => {
		data.show = false;
	}
	const queryList = (pageNo, pageSize) => {
		sealList({
			page: pageNo,
			limit: pageSize,
		}).then(res => {
			paging.value.complete(res.data)
		});
	}
	const itemClick = (item) => {
		emit('return-seal', item.member_seal_id);
		close();
	}
	defineExpose({
		open,
	});
</script>
<style lang="less" scoped src="/static/css/contract/signing_record.scss"></style>
<style lang="scss" scoped>
	.content {}

	.search-box {
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		height: 100rpx;
	}

	.contract-list {
		border-bottom: 2rpx solid #E7E7E7;
		height: 110rpx;
		align-items: center;
		padding: 0 32rpx;

		.file-icon {
			width: 33rpx;
			height: 42rpx;
		}

		.title_box {
			flex: 1;
			margin: 0 16rpx;

			.title {
				width: 368rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.9);
				display: -webkit-box;
				/* WebKit浏览器支持 */
				overflow: hidden;
				/* 隐藏超出部分 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				white-space: nowrap;
			}
		}

		.use {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #4787F0;
		}
	}
</style>